<template>
    <div class="see-pdf">
        <top-bar :isBlack="true" :title="info.title"></top-bar>
        <iframe class="iframe" :src="path" frameborder="0"></iframe>
        <div class="btn-wrapper">
            <van-button color="#224448" block @click="goReturn">返回</van-button>
        </div>
    </div>
</template>
<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "seePdf",
    data() {
        return {
            //   path: `http://localhost/dashboard/pdfShow/web/viewer.html?file=${this.$route.query.pdf}`,
            // path: `http://localhost/dashboard/pdfShow/web/viewer.html`,
            info: {},
        };
    },
    computed: {
        path() {
            const encodedPdfUrl = encodeURIComponent(this.info.pdf_url);
            return `http://leadshare.vhost189.datalink.cc/pdfShow/web/viewer.html?file=${encodedPdfUrl}`;
            // return `http://leadshare.vhost189.datalink.cc/pdfShow/web/viewer.html?file=${this.info.pdf_url}`;
        },
    },
    mounted() {
        this.info = JSON.parse(this.$route.query.pdf);
    },
    methods: {
        goReturn() {
            this.$router.go(-1);
        },
    },
    components: {
        TopBar,
    },
};
</script>
<style lang="scss">
.mail-detail {
    .van-button {
        height: 54px;
    }
    .van-button--normal {
        font-size: 16px;
    }
}
</style>
<style lang="scss">
.see-pdf {
    height: 100vh;
    z-index: 9;
    background-color: #f4f4f4;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    .iframe {
        height: calc(100vh - 88px);
        width: 100%;
    }
    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 750px) {
    .see-pdf {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
